<template>
	<view>
		<navbar title="选择小区"></navbar>
		<view class="search-wrapper fa">
			<view class="search-box fa">
				<image class="search-icon" src="../../static/search.png" mode=""></image>
				<input class="flex1" type="text" placeholder="查询小区" v-model="keyword" @input="searchInput" @confirm="searchCommunity" />
			</view>
		</view>
		<view class="main">
			<view class="current-box">
				<view class="title">当前小区</view>
				<view class="current flex" :class="{active : community != '请选择小区'}">
					<view class="flex1 ell1">{{community}}</view>
					<image class="select-icon" src="../../static/selected.png" mode="" v-if="community != '请选择小区'"></image>
				</view>
			</view>
			<view class="select-wrapper">
				<view class="title">选择小区</view>
				<view class="community-box">
					<view class="community-list flex" v-for="(item, index) in communityList" :key="index" @click="pickCommunity(item.name)">
						<image class="image" :src="item.mainImg" mode=""></image>
						<view class="flex1">
							<view class="name">{{item.name}}</view>
							<view class="address-box flex">
								<image class="address-icon" src="../../static/location2.png" mode=""></image>
								<view>{{item.address}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="nodata-box" v-if="nodata">
					<image class="nodata-img" src="../../static/nodata.png" mode=""></image>
					<view class="nodata-prompt">暂无数据</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				longitude: '',
				latitude: '',
				community: '请选择小区',
				communityList: [],
				nodata: 0
			};
		},
		onLoad() {
			this.getCommunity()
		},
		methods: {
			getLocation() {
				uni.getLocation({
					success: result => {
						this.longitude = result.longitude
						this.latitude = result.latitude
						this.getCommunity()
					},
					fail: error => {
						console.log(error)
						uni.showToast({
							title: '获取位置信息失败，无法匹配到附近小区，请先打开手机定位功能',
							icon: 'none'
						})
					}
				})
			},
			getCommunity() {
				this.api.communityListFunc({
					longitude: this.longitude,
					latitude: this.latitude,
					name: this.keyword
				}).then(res => {
					if(res.code == 200) {
						this.communityList = res.data
						// this.nodata = 1
					}
				})
			},
			// 选择小区
			pickCommunity(name) {
				this.community = name
				uni.$emit('selectCommunity', name);
				setTimeout(() => {
					uni.navigateBack()
				}, 500)
			},
			searchInput() {
				if(this.keyword == '') {
					this.getCommunity()
				}
			},
			// 查询小区
			searchCommunity() {
				if(!this.keyword) return uni.showToast({
					title: '请输入小区名称',
					icon: 'none'
				})
				this.getCommunity()
			}
		}
	}
</script>
<style>
	page{
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.search-wrapper{
		margin-top: 16rpx;
		padding: 6rpx 26rpx;
		.search-box{
			padding: 0 32rpx;
			width: 100%;
			height: 64rpx;
			border-radius: 32rpx;
			background-color: #F8F8F8;
			.search-icon{
				margin-right: 16rpx;
				width: 32rpx;
				height: 32rpx;
			}
		}
	}
	.main{
		padding: 28rpx;
	}
	.current-box{
		.title{
			font-size: 32rpx;
			font-weight: bold;
		}
		.current{
			margin-top: 28rpx;
			padding: 28rpx 32rpx;
			border: 1rpx solid #ccc;
			border-radius: 12rpx;
			background: #eee;
			&.active{
				border: 1rpx solid var(--theme);
				color: var(--theme);
				background: rgba(148,203,160,0.1);
			}
			.select-icon{
				margin-left: 10rpx;
				width: 44rpx;
				height: 44rpx;
			}
		}
	}
	.select-wrapper{
		margin-top: 40rpx;
		.title{
			font-size: 32rpx;
			font-weight: bold;
		}
		.community-box{
			margin-top: 20rpx;
			.community-list{
				padding: 20rpx 0;
				.image{
					margin-right: 22rpx;
					width: 80rpx;
					height: 80rpx;
					border-radius: 8rpx;
				}
				.name{
					font-size: 30rpx;
					font-weight: bold;
					line-height: 36rpx;
				}
				.address-box{
					margin-top: 4rpx;
					font-size: 22rpx;
					color: #777;
					.address-icon{
						margin-right: 6rpx;
						margin-top: 6rpx;
						width: 26rpx;
						height: 26rpx;
					}
				}
			}
		}
	}
</style>
